<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'
import EchartsMixins from '../echarts.mixins'

// 加载echarts，注意引入文件的路径
export default {
  mixins: [EchartsMixins],
  data () {
    return {
      charts: '',
      shiftList: [],
      pullingList: [],
      shiftTime: [],
      maxNum: '',
      minNum: '',
      // 监测点名称
      monitorName: '',
    }
  },
  computed: {
    options () {
      return {
        title: {
          text: this.monitorName + '监测点位移、拉力曲线图',
          x: 'center',
          align: 'right'
        },
        grid: {
          left: '60px',
          right: '90px',
          bottom: '70px'
        },
        legend: {
          data: ['位移值', '拉力值'],
          x: 'right',
          y: 'top',
          orient: 'vertical',
          padding: [55, 0, 0, 0]
        },
        toolbox: {
          right: '0',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',

            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: function (params, ticket, callback) {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (i === 0) {
                contentArr.push(data.name)
              }
              contentArr.push(data.marker + data.seriesName + '：' + data.value)
            }
            return contentArr.join('<br/>')
          }
        },
        dataZoom: [{
          show: true,
          realtime: true,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        },
        {
          type: 'inside',
          realtime: true
        }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          min: 0,
          axisLine: {
            onZero: false
          },
          data: this.shiftTime
        },
        yAxis: [{
          name: '位移值(mm)',
          type: 'value',
          axisLine: { // y轴
            show: true
          },
          // min: this.minNum,
          // max: this.maxNum,
          // interval: 0.5,
        }, {
          name: '拉力值(kg)',
          type: 'value',
          axisLine: { // y轴
            show: true
          },
          // min: this.minNum,
          // max: this.maxNum,
          // interval: 0.5,
        }],
        series: [{
          name: '拉力值',
          type: 'line',

          smooth: true,
          symbol: 'diamond',
          symbolSize: 4,
          data: this.pullingList,
          yAxisIndex: 1,
        },
        {
          name: '位移值',
          type: 'line',

          smooth: true,
          symbol: 'diamond',
          symbolSize: 4,
          data: this.shiftList,
          markLine: {
            data: this.markLine,
            lineStyle: {
              normal: {
                type: 'dashed',
                color: '#BD304C'
              }
            }
          }
        }
        ]
      }
    }
  },
  methods: {
    updateEchart (data, monitorName) {
      this.monitorName = monitorName
      this.shiftList = data.realValue
      this.pullingList = data.relativePullValue
      this.shiftTime = data.createTime
      this.charts.setOption(this.options)
      this.charts.resize()
    },
  },
}
</script>
